<template>
  <dl class="m-sum-card">
    <dt>
      <h1>{{ product.name }}</h1>
      <el-rate
        v-model="rate"
        disabled
      />
      <span>{{ product.rating || rate }}分</span>
      <span v-if="product.cost">人均￥{{ product.cost }}</span>
      <span v-else>暂无价格</span>
      <ul>
        <li @click="openMap(product.location)">
          地址：{{ product.address }}
        </li>
        <li>电话：{{ product.tel || '暂无电话' }}</li>
      </ul>
    </dt>
    <dd>
      <el-carousel
        height="214px"
        indicator-position="none"
      >
        <el-carousel-item
          v-for="(item,idx) in product.photos"
          :key="idx"
        >
          <h3>
            <img
              :src="item.url"
              alt="item.title"
              width="100%"
              height="100%"
            >
          </h3>
        </el-carousel-item>
      </el-carousel>
    </dd>
  </dl>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      sale: 70 + Math.floor(Math.random() * 300)
    }
  },
  computed: {
    rate () {
      return Number(Math.floor(Math.random() * 5))
    }
  },
  mounted () {
    console.log(this.product)
  },
  methods: {
    openMap (location) {

    }
  }
}
</script>
